<template>
    <div class="location-showcase" :style="backgroundStyle">
      <!-- 左侧轮播图 -->
      <div class="carousel-container">
        <el-carousel :interval="3000" :autoplay="true" :loop="false" @change="updateBackgroundImage">
          <el-carousel-item v-for="(image, index) in images" :key="index">
            <div class="carousel-item">
              <img :src="image" alt="景点图片" class="carousel-image" />
              <div class="overlay-text">
                {{ selectedProvince }} 
              </div>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
  
      <!-- 右侧地图 -->
      <div class="map-container" id="map-container"></div>
    </div>
  </template>
  
  <script>
  import { ref, onMounted,watch} from 'vue';
  import { ElCarousel, ElCarouselItem } from 'element-plus';
  import 'element-plus/dist/index.css';
  import { BaiduMap, BaiduMapMarker, BaiduMapNavigation } from 'vue-baidu-map-3x'; 
  
  export default {
    name: "FirstShow",
    props: {
      filteredSpots: Array,
      selectedProvince: {
        type: String,
        default: "中国"
      }
    },
    setup(props) {
      // 轮播图数据
      const images = ref([
        'https://picsum.photos/700/400',  // 示例图片
        'https://picsum.photos/700/400?random=1',
        'https://picsum.photos/700/400?random=2'
      ]);
  
      // 省份坐标映射
      const provinceCoordinatesMap = {
  中国: { lng: 116.404, lat: 39.915 }, // 全国中心（北京）
  北京: { lng: 116.4074, lat: 39.9042 },
  天津: { lng: 117.1902, lat: 39.1256 },
  河北: { lng: 114.5025, lat: 38.0456 },
  山西: { lng: 112.5492, lat: 37.857 },
  内蒙古: { lng: 111.6708, lat: 40.8183 },
  辽宁: { lng: 123.4291, lat: 41.7968 },
  吉林: { lng: 125.3245, lat: 43.8868 },
  黑龙江: { lng: 126.6425, lat: 45.7569 },
  上海: { lng: 121.4737, lat: 31.2304 },
  江苏: { lng: 118.7674, lat: 32.0415 },
  浙江: { lng: 120.1536, lat: 30.2875 },
  安徽: { lng: 117.283, lat: 31.8612 },
  福建: { lng: 119.3062, lat: 26.0753 },
  江西: { lng: 115.8922, lat: 28.6765 },
  山东: { lng: 117.0009, lat: 36.6758 },
  河南: { lng: 113.6654, lat: 34.757 },
  湖北: { lng: 114.2986, lat: 30.5844 },
  湖南: { lng: 112.9823, lat: 28.1941 },
  广东: { lng: 113.2806, lat: 23.1252 },
  广西: { lng: 108.320, lat: 22.824 },
  海南: { lng: 110.3312, lat: 20.0313 },
  重庆: { lng: 106.5516, lat: 29.563 },
  四川: { lng: 104.0657, lat: 30.6595 },
  贵州: { lng: 106.7135, lat: 26.5783 },
  云南: { lng: 102.7123, lat: 25.0406 },
  西藏: { lng: 91.1322, lat: 29.6604 },
  陕西: { lng: 108.948, lat: 34.2632 },
  甘肃: { lng: 103.8236, lat: 36.058 },
  青海: { lng: 101.7789, lat: 36.6232 },
  宁夏: { lng: 106.2782, lat: 38.4664 },
  新疆: { lng: 87.6177, lat: 43.7928 },
  香港: { lng: 114.1694, lat: 22.3193 },
  澳门: { lng: 113.5439, lat: 22.1987 },
  台湾: { lng: 121.5091, lat: 25.0443 }
};

  
      // 地图数据
      const center = ref(provinceCoordinatesMap[props.selectedProvince] || { lng: 116.404, lat: 39.915 });
      const zoom = ref();
  
      // 初始化地图
      const map = ref(null);
      const localSearch = ref(null);
      
      const initMap = () => {
        if (window.BMap) {
          // 不要删下面一行英文注释，否则跑不了
          /* eslint-disable no-undef */
          map.value = new BMap.Map('map-container');
          const point = new BMap.Point(center.value.lng, center.value.lat);
          map.value.centerAndZoom(point, zoom.value);  // 设置地图中心和缩放级别
  
          // 添加地图控件
          map.value.addControl(new BMap.NavigationControl());  // 缩放控件
          map.value.addControl(new BMap.ScaleControl());  // 比例尺控件
          map.value.enableScrollWheelZoom(true);  // 启用滚轮缩放
  
          // 设置图钉
          const marker = new BMap.Marker(point);
          map.value.addOverlay(marker);  // 添加图钉
  
          // 初始化本地搜索
          localSearch.value = new BMap.LocalSearch(map.value, {
            renderOptions: { map: map.value }
          });
        }
      };
  
      onMounted(() => {
        initMap();  // 初始化地图
      });
  
      // 监听省份变化，更新地图
      watch(() => props.selectedProvince, (newProvince) => {
        center.value = provinceCoordinatesMap[newProvince] || { lng: 116.404, lat: 39.915 };
        initMap();  // 重新初始化地图
      });
  
      return {
        images,
        center,
        zoom
      };
    }
  }
  </script>
  
  <style scoped>
  .location-showcase {
    display: flex;
    align-items: stretch;
    justify-content: center;
    width: 100%;
    max-width: 1000px;
    margin: 50px auto 0;
    padding: 0 20px;
    gap: 0px;
    position: relative;
    background-color: rgba(0, 0, 0, 0);
    overflow: hidden;
  }
  
  /* 轮播图 */
  .carousel-container {
    flex: 3;
    height: 550px;
    position: relative;
  }
  
  .carousel-item {
    position: relative;
    width: 100%;
    height: 100%;
  }
  
  .carousel-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  /* 左下角文字 */
  .overlay-text {
    position: absolute;
    bottom: 10px;
    left: 15px;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 5px 10px;
    font-size: 16px;
    border-radius: 5px;
  }
  
  /* 地图 */
  .map-container {
    flex: 1.2;
    height: 300px;
  }
  
  .baidu-map {
    width: 100%;
    height: 100%;
  }
  </style>
  